<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据比较</title>
    <script src="../../res/echarts/echarts.js"></script>
    <script src="../../res/echarts/xm-select.js"></script>
    <script src="../../res/js/jquery-3.1.1.min.js" ></script>
    <script src="../../res/js/login_common.js" ></script>
    <script type="text/javascript" src="../../res/layui/layui.js"></script>
    <link href="../../res/layui/css/layui.css" rel="stylesheet" />
    <link href="../../res/echarts/eleTree.css" rel="stylesheet" />
    <script src="../../res/echarts/eleTree.js"></script>
    <style type="text/css">
        li{
            width: 300px;
            height: 50px;
            float: left;
        }
        ul{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .zbs{
            padding-left: 10px;
            padding-right: 10px;
        }
        .zb:hover{
            cursor:pointer
        }
        .bnm:hover{
            color: #474444;

        }
    </style>
</head>
<body>

<form class="layui-form" action="" lay-filter="example" id="from">
    <div class="layui-form-item">
        <label class="layui-form-label" style=" margin-top: 20px;margin-left:10px;font-size: 15px">选择:</label>
        <div class="layui-input-inline" >
            <div id="demo1" style="width: 300px; margin-top: 20px;"></div>

            <div id="cao" style="width: 1100px;" ></div>

        </div>
        <button class="layui-btn"style="margin-left: 40%;margin-top: 3%" id="xiazai" type="button" >导出</button>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style=" margin-left:10px;font-size: 15px">选择指标:</label>
        <div class="layui-input-inline">
            <div  id="demo3"style="width: 500px;" class="xm-select-demo"></div>

        </div>

    </div>
    <div class="layui-form-item" >
        <button class="layui-btn"style="margin-left: 20%;" id="butoo" type="button" lay-submit="" lay-filter="demo2">确认</button>
    </div>
    <div></div>
    <div id="sdf"></div>
</form>

<script>
    $(function() {
        $.ajaxSetup({
            async: false
        });
    })
</script>
<script>
    var renci=3;//选中远动员个数
    var bijiaoci=3;//选中数据个数
    layui.use(['form', 'layedit', 'laydate','element'], function(){
        $("#xiazai").click(function(){
            if($("#sdf").html()==""){
                layer.msg("你没选择数据，无法导出", {
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                });
            }else{
                layer.confirm('真的导出当前显示的数据吗么', function (index) {
                    var url1234="../../AtsDataShowController/download"
                    location.href=url1234;
                    layer.close(index);
                })
            }

        })
        var sportId=getQueryStringOne("sportId");

        var athleteId= getQueryStringOne("athleteId");

        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        if(athleteId!=null){

            var url123="../../AtsDataShowController/selectitem"
            var data123={athleteId:athleteId};

            $.post(url123,data123,function (obj) {
                if(obj.num==0){
                    layer.msg("远动项目不同，无法比较", {
                        icon: 2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index);
                    });
                }else {
                    sportId=obj.sportId;

                    $.each(obj.data,function(index,item){

                        $("#cao").append(' <div id="dems'+index+'" class="cishuw" style=" width:25%;float: left; margin-top: 20px;margin-right: 10px;"></div>')
                        lei(index,item.athleteId,null,item.athleteName)
                    })
                }
            },"json")
        }

        if(getQueryStringOne("batchId")!=null){

            var url12="../../AtsDataShowController/selectBatchId"
            var data12={batchId:getQueryStringOne("batchId")};

            $.post(url12,data12,function (obj) {
                sportId=obj.sportId;
                athleteId=obj.athleteId;

                $("#cao").append(' <div id="dems0" class="cishuw" style="width:25%;float: left; margin-top: 20px;margin-right: 10px;"></div>')

                lei(0,athleteId,obj.batchId,obj.athleteName);
            },"json")
        }

        var url="../../AtsDataShowController/selectBysportId"
        var datas={sportId:sportId,athleteIds:athleteId};

        $.post(url,datas,function (obj) {

            var demo1 = xmSelect.render({
                el: '#demo1',
                filterable:true,
                autoRow:true,
                paging: true,
                name:'yudo',
                pageSize: 5,
                max:renci,
                tips:'选择要比较运动员',
                searchTips:'请输入关键字',
                on({ arr, change, isAdd }){
                    var ids="";
                    $("#cao").html("");
                    if(arr.length>1){
                        bijiaoci=1;
                    }else{
                        bijiaoci=3;
                    }
                    $.each(arr,function(index,item){

                        $("#cao").append(' <div id="dems'+index+'" class="cishuw" style=" width:25%;float: left; margin-top: 20px;margin-right: 10px;"></div>')
                        lei(index,item.value,null,item.name)
                    })

                },
                maxMethod:function (sels, item) {

                    layer.msg('最多选'+renci+'个', {
                        icon: 2,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){

                    });
                },
                data:obj
            })
        },"json")

        var demo3 = xmSelect.render({
            el: '#demo3',
            name:'zhibiao',
            autoRow:true,
            theme: {
                color: '#5FB878',
            },
            content: '<input placeholder="请输入关键字" style="font-size:15px;margin-left: 10px;width:400px;height: 40px; border: none;border-bottom: solid 1px #dbdbe7" type="text" id="sousuo"><div  id="ele1" class="eleTree ele1" lay-filter="ele1"></div>',
        })

        //渲染自定义内容
        var url2="../../AtsDataShowController/selectAtsBaseItem";
        var data4={sportId:sportId};
        var ele=null;
        $.post(url2,data4,function(obj){

            ele = layui.eleTree.render({
                elem: '#ele1',
                searchNodeMethod:function(value,data) {

                    if(data.label.indexOf(value) !== -1){
                       // alert("zhaodaol")
                        //ele.unExpandAll();
                        return true;
                    }else{
                        return false;
                    };
                },
                data:obj ,
                showCheckbox: true,
                defaultExpandAll: true,
            });
        },"json")

        demo3.update({
            on({ arr, change, isAdd }){
                if(isAdd === false){//监听取消
                    ele.setChecked(arr.map(item => item.id), true);
                }
            },
        });
        layui.eleTree.on("nodeChecked(ele1)", function(d) {
            var arr = ele.getChecked(true, false)
            demo3.update({
                prop: {
                    name: 'label',
                    value: 'id',
                },
                data: arr,
            }).setValue(arr)
        })

        $("#sousuo").on("input propertychange",function(){
            ele.search($(this).val());
        })

        form.on('submit(demo2)', function(data){

            if(data.field.yudo==""){
                layer.msg("运动员为空", {
                    icon : 2,
                    time : 1000
                }, function() {

                })
                return;
            }
            $("#sdf").html("");
            strs="";
            var fromdata=data.field;
            var dfg="";
            var fgh=1;
            $(".cishuw").each(function(index,item){
                if(data.field["cishu" + index]==""){
                    fgh=2;
                }
                if(index==0){
                    dfg += fromdata["cishu" + index];
                }else {
                    dfg += "," + fromdata["cishu" + index];
                }
                delete fromdata["cishu" + index];
            })
            if(fgh==2){
                layer.msg("批次为空", {
                    icon : 2,
                    time : 1000
                }, function() {

                })
                return;
            }
            if(data.field.zhibiao==""){
                layer.msg("指标为空", {
                    icon : 2,
                    time : 1000
                }, function() {

                })
                return;
            }
            fromdata.cishu=dfg;
            fromdata.sportId=sportId;
            $("#butoo").text("请等待");
            $("#butoo").prop("disabled",true);
            var url45="../../AtsDataShowController/select"
            $.post(url45,fromdata,function (obj) {
                require.config({
                    paths: {
                        echarts: '../../res/echarts'
                    }
                });
                require(
                    [
                        'echarts',
                        'echarts/chart/line',  // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                        'echarts/chart/bar'
                    ],
                    function (ec) {

                        Infinite(ec,obj[0].data);
                        fuxian(ec,obj[0].data,null,obj);
                        // layer.close(indexdf);
                        /*$("#butoo").text("确认");
                        $("#butoo").prop("disabled",false);*/
                        setTimeout (dis,5000)
                    })
            },"json")
            return false;
        });
        var element = layui.element;
        element.init();

    })

    function dis() {
        $("#butoo").text("确认");
        $("#butoo").prop("disabled",false);
    }

</script>

<script>
    function lei(index,athleteId,batchId,name) {

        var url11="../../AtsDataShowController/selectAtsDataComparison"
        var datas11={athleteId:athleteId,batchIds:batchId};
        var demo5=null;
        $.post(url11,datas11,function (obj) {
            demo5  = xmSelect.render({
                el: '#dems'+index,
                filterable: true,
                autoRow: true,
                paging: true,
                name: 'cishu'+index,
                pageSize: 5,
                max: bijiaoci,
                tips: '选择'+name+'的比较次数',
                searchTips: '请输入关键字',
                maxMethod: function (sels, item) {

                    layer.msg('最多选'+bijiaoci+'个', {
                        icon: 2,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {

                    });


                },
                data: obj
            })
        })
    }
    function getQueryStringOne(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURI(r[2]);
        return null;
    }
    //创建ECharts图表方法  

    function dainji(obj) {

        $("#zbs"+$(obj).prop('id').substr(2)).toggle(500);

        if( $(obj).find("legend").find("spen").find("spen").text()=="hid"){
            $(obj).find("legend").find("spen").html('<i class="layui-icon">&#xe623;</i><spen hidden>hids</spen>');
        }else{
            $(obj).find("legend").find("spen").html('<i class="layui-icon">&#xe625;</i><spen hidden>hid</spen>');
        }


    }
</script>
<script>
    var strs=""
    function Infinite(ec,data,id) {

        $.each(data,function (index,item) {
            if(id==null){
                id="";
            }else{
                id+="_"+index;
            }

            if(item.children.length>0){
                strs+=' <fieldset class="layui-elem-field layui-field-title zb" style="margin-top: 20px;clear:both;"  onclick="dainji(this)"                    id="zb'+id+'">\n' +
                    '            <legend class="bnm">'+item.name+'<spen><i class="layui-icon">&#xe625;</i><spen hidden>hid</spen></spen> </legend>\n' +
                    '        </fieldset>';
                strs+='<div  id="zbs'+id+'" class="zbs"  ">';
                Infinite(ec,item.children,id,strs);
                strs+='</div><div ></div>';

            }else{
                strs+='<div id="tu'+id+'"  style="width: 250px;height:150px;float: left;"></div>';
            }

        })
        //$("#from").html(strs)
        $("#sdf").html(strs);


    }
    function fuxian(ec,data,id,data2) {

        $.each(data,function (index,item) {
            if(id==null){
                id="";
            }else{
                id+="_"+index;
            }


            if(item.children.length>0){
                var data3= pancha(data2,index)
                fuxian(ec,item.children,id,data3);


            }else{
                var ids="tu"+id;
                var data3= pancha(data2,index);
                shujitu(ec,ids,data3)
            }

        })
    }
    function pancha(data,indexs){
        console.info("进来");
         console.info(data)
        var arr2 = new Array();
        $.each(data,function(index,item){
            var arr = new Array();

             console.info("值+  na"+indexs)
            console.info((item.data)[indexs])
            if((item.data)[indexs].children.length==0){
                var map={data:(item.data)[indexs],name:item.name}
            }else{
                var map={data:(item.data)[indexs].children,name:item.name}
            }


            arr2[index]=map;
        });
        //console.info("出去")


        //console.info(arr2)

        return arr2;
    }
    function shujitu(ec,id,data){
        var myChart = ec.init(document.getElementById(id));
        var arr = new Array();
        var arr2 = new Array();
        var arr3 = new Array();
        var arr4 = new Array();
        // console.info(data)
        $.each(data,function(index,item){

            arr3[index]=item.name;
            arr[0] = item.data.name;
            arr[1] = item.data.label;
            arr4[index] = item.data.value;


        })
//
        var mp={name:arr[0],type:"bar",stack:"总量",itemStyle:{
                normal: {
                    color: function (params){
                        var colorList = ['rgb(250,125,125)','rgb(42,170,227)','rgb(94,245,148)','rgb(245,213,60)','rgb(233,150,252)'];
                        return colorList[params.dataIndex];
                    }, //柱子宽度
                    label: {
                        show: true, //开启显示position:'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black', fontSize: 10
                        }
                    }
                }
            },data:arr4}
        arr2[0]=mp;

        var option = {
            title:{
                text:arr[0]+"("+arr[1]+")",
                x:'center',
                textStyle: {
                    fontSize: 12,
                    color: '#333',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: ''        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                y2:30,
                x2:50,
                y:30,
                x:70
            },
            xAxis: {
                type: 'value',

            },
            yAxis: {
                type: 'category',

                data: arr3
            },
            series: arr2
        };
        myChart.setOption(option);

    }
</script>

</body>
</html>